<template>
  <div class="show-main">
    <el-scrollbar style="height: 100%;">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <el-form :inline="true" :model="searchForm" ref="searchForm">
            <el-form-item prop="date">
              <el-date-picker
                v-model="date"
                type="daterange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['00:00:00', '23:59:59']"
                value-format="yyyy-MM-dd HH:mm:ss"
                @change="
                  (value) => {
                    return dateChange(value, 'searchForm')
                  }
                "
                :clearable="false"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item prop="name">
              <el-input v-model="searchForm.name" clearable placeholder="请输入分拣中心名称"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click.stop="search(true)">搜索</el-button>
              <el-button type="success" @click.stop="search">刷新</el-button>
              <el-button type="warning" @click.stop="outExcel">下载</el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-table :data="table" border>
          <el-table-column prop="id" label="商品ID"></el-table-column>
          <el-table-column prop="name" label="商品名称"></el-table-column>
          <el-table-column prop="center_name" label="分拣中心"></el-table-column>
          <el-table-column prop="total_weight" label="数量">
            <template slot-scope="scope"> {{ scope.row.total_weight }} {{ scope.row.unit_name }} </template>
          </el-table-column>
        </el-table>
        <div class="page">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="searchForm.page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="searchForm.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="count"
          >
          </el-pagination>
        </div>
      </el-card>
    </el-scrollbar>
  </div>
</template>
<script>
import { formatDateFun } from '@/untils/common.js'
import { goodsInList, goodsInExcel } from '@/network/api.js'

export default {
  name: 'GoodsIn',
  data() {
    return {
      date: [
        new Date(new Date(new Date().toLocaleDateString('zh')).getTime()),
        new Date(new Date(new Date().toLocaleDateString('zh')).getTime() + 24 * 60 * 60 * 1000 - 1)
      ],
      searchForm: {
        page: 1,
        limit: 10,
        start: formatDateFun(new Date(new Date().toLocaleDateString('zh')).getTime()),
        end: formatDateFun(new Date(new Date().toLocaleDateString('zh')).getTime() + 24 * 60 * 60 * 1000 - 1),
        name: ''
      },
      table: [],
      count: 0
    }
  },
  created() {
    this.search()
  },
  computed: {},
  methods: {
    // 每页条数变化
    handleSizeChange(val) {
      this.searchForm.limit = val
      this.search()
    },
    // 当前页变化
    handleCurrentChange(val) {
      this.searchForm.page = val
      this.search()
    },
    dateChange(v, formName) {
      if (v === null) {
        this[formName].start = ''
        this[formName].end = ''
      } else {
        this[formName].start = v[0]
        this[formName].end = v[1]
      }
    },
    async search(pageInit = false) {
      try {
        if (pageInit === true) {
          this.searchForm.page = 1
        }
        const rtn = await goodsInList(this.searchForm)
        this.table = rtn.list
        this.count = rtn.count
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    outExcel(mastr) {
      this.$confirm('此操作将下载excel表', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          try {
            const rtn = await goodsInExcel({ start: this.searchForm.start, end: this.searchForm.end, name: this.searchForm.name })
            const a = document.createElement('a')
            a.href = rtn
            a.download = '商品入库统计.xlsx'
            a.click()
          } catch (e) {
            this.$message.error(e.message)
          }
        })
        .catch(() => {
          this.$message.warnning('您取消了操作')
        })
    }
  }
}
</script>
<style lang="less" scoped>
</style>
